<template>
	<view class="cash-withdrawal">
		<view class="wrapper">
			<view class="list">
				<view class="item acea-row row-between-wrapper">
					<view class="name">持卡人</view>
					<view class="input">
						<input type="text" placeholder="请输入持卡人姓名" v-model="name" >
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="name">手机号</view>
					<view class="input">
						<input type="text" placeholder="请输入手机号" v-model="mobile" >
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="name">卡号</view>
					<view class="input">
						<input type="number" placeholder="请填写卡号" v-model="bank_num" >
						
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="name">银行</view>
					<view class="input">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<text class='Bank'>{{array[index]}}</text>
							<text class='iconfont icon-qiepian38'></text>
						</picker>
					</view>
				</view>
				<view class="bottom">
					<view class="default flex-align flex flex-bt">
						<view class="left">
							<view class="set">设置默认银行卡</view>
							<view class="tips">提醒：每次交易会默认推荐该银行卡</view>
						</view>
						<view class="right"><switch color="#f20" @change="setDefault" :checked="is_xuan" /></view>
					</view>
				</view>
				<button class="bnt bg-color" @click="tui.dianji(add_bank)">立即添加</button>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				index: 0,
				array: [], //提现银行
				bank_num:'',
				banks:'',
				mobile:'',
				idCard:'',
				is_xuan:'',
				isDefault:1,
				is_btn:false
			};
		},
		onLoad() {
			let that = this
			that.get_bank()
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value;
			},
			setDefault(e) {
				this.is_xuan = e.detail.value
				if(this.is_xuan){
					this.isDefault = 1
				}else{
					this.isDefault = 2
				}
			},
			get_bank(){
				let that = this
				that.tui.request("api.auth.center/bank", "GET", {}, false, true, true).then((res) => {
					that.banks = res.data.list
					res.data.list.map((item,index)=>{
						that.array.push(item.name)
					})
				}).catch((res) => {})
			},
			add_bank(){
				let that = this
				if(that.name==''){
					that.tui.toast('持卡人姓名不能为空')
					return false
				}
				if(that.mobile==''){
					that.tui.toast('手机号不能为空')
					return false
				}
				
				if(that.bank_num==''){
					that.tui.toast('银行卡号不能为空')
					return false
				}
				
				let data = {bank_username:that.name,bank_id:that.banks[that.index].id,bank_card:that.bank_num,bank_phone:that.mobile,type:that.isDefault}
				console.log(data)
				that.tui.request("api.auth.center/userBank", "POST", data, false, true, true).then((res) => {
					that.tui.toast('添加成功')
					setTimeout(function(){
						uni.navigateBack()
					},1000)
				}).catch((res) => {})
				
			}
		}
	};
</script>

<style lang="scss">
	page{background: #fff;}
	.cash-withdrawal .nav{
		height: 134rpx;
		box-shadow: 0 10rpx 10rpx #f8f8f8;
	}
	.acea-row {
	    display: flex;
	    flex-wrap: wrap;
	}
	.cash-withdrawal .nav .item{
	    font-size: 26rpx;
	    flex: 1;
	    text-align: center;
	}
	.fontcolor{
	    color: #e93323!important;
	}
	.cash-withdrawal .nav .item .line.on{
	    height: 60rpx;
	}
	.cash-withdrawal .nav .item .line{
	    width: 1px;
	    height: 20rpx;
	    margin: 0 auto;
	    transition: height 0.3s;
	}
	.cash-withdrawal .wrapper .list{
	    padding: 0 30rpx;
	}
	.cash-withdrawal .wrapper .list .item{
	    border-bottom: 0.5px solid #eee;
	    min-height: 28rpx;
	    font-size: 30rpx;
	    color: #333;
	    padding: 40rpx 0;
	}
	.acea-row.row-between-wrapper {
	    align-items: center;
	    justify-content: space-between;
	}
	.cash-withdrawal .wrapper .list .item .name{
	    width:134rpx;
	}
	.cash-withdrawal .wrapper .list .item .input{
	    width: 534rpx;
	}
	.cash-withdrawal .wrapper .list .tip{
	    font-size: 26rpx;
	    color: #999;
	    margin-top: 26rpx;
	}
	.cash-withdrawal .wrapper .list .bnt{
	    font-size: 32rpx;
	    width: 100%;
	    height: 92rpx;
	    text-align: center;
	    border-radius: 52rpx;
	    line-height: 92rpx;
	    margin: 166rpx auto 0;
		background: $base;color: #fff;
	}
	.price {
	    color: #e93323;
	}
	.bottom {
		margin-top: 20rpx;
		padding: 10rpx 0 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx #eee;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: #eee;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
	}
</style>
